<li class="{{bannerClass}}" (click)="onClickBanner()">
  <a href="javascript:">
    <component-metadata-svg [iconClass]="iconClass"></component-metadata-svg>
    <div class="ddp-data-name">
      {{ metadata.name }}
    </div>
    <div class="ddp-data-det">
      {{ metadata.description ? metadata.description : 'No Description' }}
    </div>
    <!-- bottom -->
    <div class="ddp-data-bottom">
      <div class="ddp-ui-popularity">
        <em class="ddp-icon-popularity"></em>
        <div class="ddp-bar">
          <span [style.width]="metadata.popularity ? metadata.popularity + '%' : 0 + '%'"></span>
        </div>
      </div>
      <!-- tags -->
      <div class="ddp-list-tags" >
        <em class="ddp-data-num">+{{ extraTagNumber }}</em>
        <span class="ddp-tags" *ngIf=" metadata.tags !== undefined && metadata.tags.length > 0">#{{metadata.tags[0].name}}</span>
        <span class="ddp-tags" *ngIf=" metadata.tags === undefined || (metadata.tags !== undefined && metadata.tags.length == 0)">#No tag</span>
      </div>
    </div>
    <!-- //bottom -->
  </a>
</li>
